import React, { memo, useRef } from 'react'
import type { ReactNode } from 'react'
import { AlbumWrapper } from './style'
import SectionHeaderV1 from '@/components/section-header-v1'
import { Carousel } from 'antd'
import { useAppSelector, shallowEqualApp } from '@/store'
import AlbumItem from '@/components/album-item'
import type { ComponentRef } from 'react'

interface IProps {
  children?: ReactNode
}

const NewAlbum: React.FC<IProps> = () => {
  const { newAlbum } = useAppSelector(
    (state) => ({
      newAlbum: state.recommend.newBlum
    }),
    shallowEqualApp
  )

  const carouselRef = useRef<ComponentRef<typeof Carousel>>(null)
  const handlerPrev = () => {
    carouselRef.current?.prev()
  }
  const handlerNext = () => {
    carouselRef.current?.next()
  }
  return (
    <AlbumWrapper>
      <SectionHeaderV1 title="新碟上架" morePath="/discover/album" />
      <div className="content">
        <div className="arrow arrow-left sprite_02" onClick={handlerPrev}></div>
        <div className="album">
          <Carousel autoplay speed={1500} ref={carouselRef}>
            {[0, 1].map((item) => {
              return (
                <div className="page" key={item}>
                  {newAlbum.slice(item * 5, (item + 1) * 5).map((item) => {
                    return <AlbumItem key={item.id} itemData={item} />
                  })}
                </div>
              )
            })}
          </Carousel>
        </div>
        <div
          className="arrow arrow-right sprite_02"
          onClick={handlerNext}
        ></div>
      </div>
    </AlbumWrapper>
  )
}

export default memo(NewAlbum)
